<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/public.css">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/changeCode.css">
    <link rel="stylesheet" href="./css/tail.css">
    <link rel="stylesheet" href="./css/公共头尾部.css">
</head>
     <!-- 头部 -->
     <header>
        <ul class="topul">
            <a href=""><li>欢迎来到丝芙兰</li></a>
            <a href="javascript:void(0)" class="zz"><li> 请登录</li></a>
            <a href="javascript:void(0)"><li> 免费注册</li></a>
            <a href=""><li> 手机验证码登录</li></a>
            <a href="" class="aa"><li> 常见问题</li></a>
            <a href="" class="a1"><img src="./img/t1.png" alt="">&nbsp;<li> 我的丝芙兰</li></a>
            <a href="" class="a1"><img src="https://ssl1.sephorastatic.cn/soa/pc/images/vip-club.png" alt="">&nbsp;<li> 会员俱乐部</li></a>
            <a href="" class="a1"><img src="https://ssl1.sephorastatic.cn/soa/pc/images/mobile-sephora.png" alt="">&nbsp;<li> 手机丝芙兰</li></a>
            <a href=""><li> 帮助中心</li></a>
            <a href=""><li> 品牌合作</li></a>
        </ul>
    </header>
    <!-- 头部搜索栏 -->
    <section>
        <a href="http://localhost:65535/sifulan.html"><h2> SEPHORA</h2></a>

        <div class="box1">
            <input type="text" name="" id="text" placeholder="轻熟肌抗氧精华">
            <ul class="search_result_list">
        
            </ul>
            <input type="submit" value="搜索"id="text1" >
            <ul id="pvp">
                <li><a href="">丝芙兰品牌大牌周</a></li>
                <li><a href="">养肤补水面膜</a></li>
                <li><a href="">轻熟肌抗氧精华</a></li>
                <li><a href="">防晒隔离必备</a></li>
                <li><a href="">畅销底妆合辑</a></li>
                <li><a href="">清爽元气香氛</a></li>
                <li><a href="">个护好物盘点</a></li>
            </ul>
        </div>
        <div class="box2">
            <a href="http://localhost:65535/www/gwc.html"><img src="./img/t2.png" alt=""><p>购物车<em>0</em>件</p></a>
        </div>
    </section>
    <div class="contain clearfix">
        <div class="body clearfix">
            <div class="centerMain clearfix main">
                <div class="leftTree clearfix">
                    <div class="title">
                        <a href="">我的丝芙兰</a>
                    </div>
                    <ul class="NavTree mt20 ml40">
                        <li>
                            <p>交易管理 </p>
                            <div class="hideArrow"></div>
                        </li>
                        <ul>
                             <li><a href="">线上订单</a></li>
                             <li><a href="">线下订单</a></li>
                             <li><a href="">我的兑换记录</a></li>
                             <li><a href="">退货售后</a></li>
                        </ul>
                        <li>
                            <p>我的权益</p>
                            <div class="hideArrow"></div>
                        </li>
                        <ul>
                            <li><a href="">积分详情</a></li>
                            <li><a href="">会员权益</a></li>
                            <li><a href="">我的优惠券</a></li>
                        </ul>
                        <li>
                            <p>账户管理</p>
                            <div class="hideArrow"></div>
                        </li>
                        <ul>
                            <li><a href="./changeInfo.html">编辑个人资料</a></li>
                            <li><a href="">管理收货地址</a></li>
                            <li><a href="./changeCode.html">更改密码</a></li>
                            <li><a href="">隐私设置</a></li>
                        </ul>
                        <li>
                            <p>玩美服务</p>
                            <div class="hideArrow"></div>
                        </li>
                        <ul>
                            <li><a href="">预约中心</a></li>
                            <li><a href="">申领中心</a></li>
                            <li><a href="">在线客服</a></li>
                            <li><a href="">帮助中心</a></li>
                        </ul>
                    </ul>

                </div>
                <div class="rightBg clearfix">
                    <div class="title">
                        更改密码
                    </div>
                    <div class="rightMain clearfix">
                        <div class="rMcontent">
                            <div class="imageStep">
                                <div class="stepModule">
                                    <div class="image first"></div>
                                    <div class="imageText">1.验证身份

                                    </div>
                                </div>
                                <div class="RightArrow"></div>
                                <div class="stepModule">
                                    <div class="image second"></div>
                                    <div class="imageText now">2.设置密码</div>
                                </div>
                                <div class="RightArrow">

                                </div>
                                <div class="stepModule">
                                    <div class="image third">

                                    </div>
                                        <div class="imageText">3.完成

                                        </div>
                                    </div>
                            </div>
                            <form class="secondBox clearFix">
                                <div class="module">
                                    <div class="buttonName">输入旧密码
                                </div>
                                <div class="SepBaseInput-chen" style="width: 300px;">
                                        <input type="password" placeholder="请输入旧密码" value="" style="width: 298px;">
                                    </div>
                                </div>
                                <div class="errorModule">

                                </div>
                                <div class="module">
                                    <div class="buttonName">设置新密码</div>
                                    <div class="SepBaseInput-chen" style="width: 300px;">
                                        <input type="password" placeholder="8-16位大小写字母、数字和特殊符号的组合" value="" style="width: 298px;" class="newpw">
                                    </div>
                                </div>
                                <div class="errorModule">
                                    
                                </div>
                                <div class="module">
                                    <div class="buttonName">确认新密码</div>
                                    <div class="SepBaseInput-chen" style="width: 300px;">
                                        <input type="password" placeholder="请再次输入密码" value="" style="width: 298px;" class="surepw">
                                    </div>
                                </div>
                                <div class="errorModule" style="color: red;font-size: 16px;position: relative;top: 12px;left: 90px;display: none;">修改成功,即将刷新页面</div>
                                <div class="confirmButton2">提交
                                </div>
                            </form>
                        </div>
                    </div>  
                </div>
            </div>
        </div>
    </div>

<!-- 尾部 -->
 <!-- foodtop -->

 <div class="foodtop">
    <div class="yilou">
        <div class="yilou1"></><img src="./imgs/b2 (1).png" alt="">
        <p><b>顺丰ems速达</b></p>
        </div>
        <div class="yilou1"></><img src="./imgs/b2 (2).png" alt="">
        <p><b>丰富礼赠</b></p>
        </div>
        <div class="yilou1"></><img src="./imgs/b2 (3).png" alt="">
        <p><b>100%正品</b></p>
        </div>
        <div class="yilou1"></><img src="./imgs/b2 (4).png" alt="">
        <p><b>无障碍退款</b></p>
        </div>
        <div class="yilou1"></><img src="./imgs/b2 (5).png" alt="">
        <p><b>安全支付</b></p>
        </div>
    </div><hr>
    <br>
    <br>
    <br>
    <br>
    <div class="cc">
            <ul class="xoxo">
                <li class="xoxo1"><a href="">购物流程</a></li>
                <li  class="bb1" ><a>大宗团购/采购</a></li>
                <li class="bb1" ><a>丝芙兰预付卡章程</a></li>
            </ul> 
            <ul class="xoxo">
                <li class="xoxo1"><a href="">支付/配送</a></li>
                <li class="bb1" ><a>在线支付</a></li>
                <li class="bb1" ><a>配送时间</a></li>
            </ul> 
            <ul class="xoxo">
                <li class="xoxo1"><a href="">售后服务</a></li>
                <li class="bb1" ><a>退换货规定</a></li>
                <li class="bb1" ><a>退款及退货说明</a></li>
            </ul> 
            <ul class="xoxo">
                <li class="xoxo1"><a href="">关于丝芙兰</a></li>
                <li class="bb1" ><a>联系我们</a></li>
                <li class="bb1" ><a>品牌合作/Baand collll</a></li>
                <li class="bb1" ><a>营私</a></li>
            </ul> 
            <ul class="xoxo">
                <li class="xoxo1"><a href="">购物流程</a></li>
                <li class="bb1" ><a>大宗团购/采购</a></li>
                <li class="bb1" ><a>卡兹男</a></li>
            </ul> 
            <ul class="xoxo">
                <li class="xoxo1"><a href="">购物流程</a></li>
                
            </ul> 
            <ul class="lastul">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </ul>

            
    </div>


</div>


<footer>
    <ul>
        <a href=""><img src="./imgs/t3.jpg" alt=""><p class="p1">沪公网安备 31010602003121号&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ICP备案序号:沪ICP备05026645号-1&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;食品经营许可证&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;网站使用条款&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;严正声明</p></a><br>
        <a href=""><p class="p2"> &nbsp;&nbsp;&nbsp;本网站隶属于丝芙兰（上海）化妆品销售有限公司（企业法人营业执照）预付卡信息对接唯一标识 : 310101F5201530100309</p></a>
    </ul>
</footer>
</body>
<script>
    const onewpw = document.querySelector(".newpw");
    const osurepw = document.querySelector(".surepw");
    const oconfirmButton2 = document.querySelector(".confirmButton2");
    const change_pwd_success = oconfirmButton2.previousElementSibling

    oconfirmButton2.onclick = function (){
        ajaxPost({
            type:"post",
            url: "http://localhost:65535/setUser",
            data:{
                username:document.cookie.split('=')[1],
                newpw: onewpw.value,
                surepw: osurepw.value
            },
            success:res=>{
                console.log(res);
                change_pwd_success.style.display = 'block'
                setTimeout(() => {
                    location.reload()
                }, 1000);
            },
            error:code=>{
                console.log(code);
            }
        })
    }
    function ajaxPost(ops = {}){
        let {type="post", success, error, data={}, url} = ops;
        let str = "";
        for(let i in data){
            str += `${i}=${data[i]}&`;
        }
       
        const xhr = new XMLHttpRequest();
     
        xhr.open(type, url, true);
        xhr.onreadystatechange = function(){
            // console.log(xhr.status);
            if(xhr.readyState === 4 && xhr.status === 200){
                success(xhr.responseText);
            }else if(xhr.readyState === 4 && xhr.status !== 200){
                error && error(xhr.status);
            }
        }
    
        xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
       
        xhr.send(str.slice(0,-1));
    }

</script>
<script src="./js/公共头尾部.js"></script>
</html>